<template>
	<div class="act2018032601">
		<div class="banner"><img v-lazy="banner" class="autoImg block" /></div>
		<div class="get-money">
			<img v-lazy="getMoney" class="relative-bg" />
			<div class="absolute-box flex">
				<div>
					<span>限美妆类</span>
					<button @click="getDiscount" ref='myBtn'>点击领取</button>
				</div>
			</div>
		</div>
		<!-- <div class="limit"><img v-lazy="limit" @click="goActivityGoods('2123', '')"/></div> -->
		<div class="list-item">
			<list-item :list-data="listData1"><img src="../../../assets/imgs/activity2018032604.png" class="title-20180327" /></list-item>
		</div>
		<div class="list-item">
			<list-item :list-data="listData2"><img src="../../../assets/imgs/activity2018032605.png" class="title-20180327" /></list-item>
		</div>
		<div class="list-item">
			<list-item :list-data="listData3"><img src="../../../assets/imgs/activity2018032606.png" class="title-20180327" /></list-item>
		</div>
		<masker v-show="show" :opacity="0.8" :fullscreen="true" style="position:fixed;width:100%;height:100%">
			<slot name="content">
				<div class="click-bg" @click="cancelGet"><img src="../../../assets/imgs/dialog_success.png" class="success-get" /></div>
			</slot>
		</masker>
	</div>
</template>

<script>
	import { XHeader, Masker } from 'vux'
	import ListItem from './listItem'
	import Api from '@/util/api'
	import Utils from '@/util/util'

	export default {
		name: 'activity20180326',
		components: {
			XHeader,
			Masker,
			'list-item': ListItem
		},
		created() {
			let self = this;
			document.title = '出游季';
			this.token = Utils.getUserToken() || this.token;
			window.loginCallBack = (token) => {
				console.log("I'm from callback yilei!!!");
				self.token = token;
			}
		},
		methods: {
			getDiscount: function(event) {
				let dom = this.$refs.myBtn,
					token = this.token;
				if(!token) {
					if(Utils.isNativeApp() || Utils.isWxPlus()) {
						token = Utils.getUserToken();
						this.token = token;
					}
					if(Utils.isWxPlus() && !token) {
						token = sessionStorage.getItem("plus_token") || Utils.getQueryString("token");
					}
					if(!token) return;
				}
				dom.setAttribute('disabled', 'disabled');
				this.$vux.loading.show();
				const res = this.post(Api.couponGrabCoupons, {
					activeId: 58
				}, {
					token
				});
				res.then(data => {
					if(data.code == '200') {
						this.show = true;
						dom.innerText = '已领取';
					} else {
						if(data.message == "非常抱歉，您已经在该活动中领取了优惠券，不能重复领取！") {
							dom.innerText = '已领取';
						} else {
							dom.removeAttribute('disabled');
						}
						if(data.code !== 1011) {
							this.$vux.toast.text(data.message, 'middle');
						}
					}
					this.$vux.loading.hide();
					dom.style.cssText = 'opacity: .6';

				}).catch(function(error) { //加上catch
					console.log(error);
				})
			},
			cancelGet: function() {
				this.$set(this.$data, 'show', false)
			},
			goActivityGoods: function(goodsId, activityId) {
				Utils.goActiveGoods(goodsId, activityId)
			}
		},
		data() {
			return {
				show: false,
				token: '',
				banner: require("../../../assets/imgs/activity2018032601.jpg"),
				getMoney: require("../../../assets/imgs/activity2018032602.png"),
				limit: require("../../../assets/imgs/activity2018032603.png"),
				listData1: [{
						id: '2500',
						url: require("../../../assets/imgs/mmfs_01.jpg"),
						title: '韩国 捷俊(JAYJUN)水光樱花面膜三部曲25ml 10片/盒 男女通用',
						price: '99.00'
					},
					{
						id: '2384',
						url: require("../../../assets/imgs/mmfs_02.jpg"),
						title: '春雨(papa recipe)蜂蜜面膜贴 黄色蜂蜜 （保湿舒缓补水修复）',
						price: '88.00'
					},
					{
						id: '4570',
						url: require("../../../assets/imgs/mmfs_03.jpg"),
						title: '美迪惠尔MEDIHEAL(可莱丝）n.m.f深层补水 毛孔修复水库面膜10片/盒 韩国本土版（面具版）',
						price: '79.00'
					},
					{
						id: '4620',
						url: require("../../../assets/imgs/mmfs_04.jpg"),
						title: '泰国RAY蚕丝超薄面膜 深层修复去痘印抚平细纹 10片/盒 13690',
						price: '76.00'
					},
					{
						id: '3806',
						url: require("../../../assets/imgs/mmfs_05.jpg"),
						title: '韩国直邮A.by bom超能婴儿冰凝叶子清润面膜 (25ml+6ml)*10片/盒 ',
						price: '139.00'
					},
					{
						id: '2726',
						url: require("../../../assets/imgs/mmfs_06.jpg"),
						title: '[三盒]LEADERS 丽得姿 领先润美强化补水面膜 10片/盒 17795',
						price: '126.00'
					},
					{
						id: '2469',
						url: require("../../../assets/imgs/mmfs_07.jpg"),
						title: '韩国AHC B5玻尿酸睡眠面膜 ',
						price: '98.00'
					},
					{
						id: '5764',
						url: require("../../../assets/imgs/mmfs_08.jpg"),
						title: '(三瓶装) 韩国RE:CIPE 莱斯璧 水晶防晒喷雾150ml 13140',
						price: '118.00'
					},
					{
						id: '4682',
						url: require("../../../assets/imgs/mmfs_09.jpg"),
						title: '[香港直邮]Missha/谜尚 水分精华气垫BB霜 21号 15g/盒 15009',
						price: '69.00'
					},
					{
						id: '2528',
						url: require("../../../assets/imgs/mmfs_10.jpg"),
						title: '韩国AHC 升级B5玻尿酸洗面奶 深层清洁180ml',
						price: '89.00'
					},
					{
						id: '4720',
						url: require("../../../assets/imgs/mmfs_11.jpg"),
						title: 'Kao日本花王碧柔水活保湿凝露水感精华露防晒霜SPF50/90ml*2',
						price: '89.00'
					},
					{
						id: '3162',
						url: require("../../../assets/imgs/mmfs_12.jpg"),
						title: '资生堂安耐晒  防晒滋润露液 金瓶 SPF50 60ml （2017版）',
						price: '229.00'
					},
					{
						id: '4745',
						url: require("../../../assets/imgs/mmfs_13.jpg"),
						title: '韩国兰芝雪纱隔离40# 30ml紫色',
						price: '149.00'
					},
					{
						id: '2858',
						url: require("../../../assets/imgs/mmfs_14.jpg"),
						title: '韩国谜尚Missha红BB霜 遮瑕保湿滋润强嫩白23号',
						price: '68.00'
					}
				],
				listData2: [{
						id: '3951',
						url: require("../../../assets/imgs/bsbs_01.jpg"),
						title: 'SK-II 第六代肌源赋活修护精华霜 80g 大红瓶面霜',
						price: '828.00'
					},
					{
						id: '3482',
						url: require("../../../assets/imgs/bsbs_02.jpg"),
						title: 'Estée Lauder 雅诗兰黛青春抗皱滋润面霜 50ml',
						price: '469.00'
					},
					{
						id: '3459',
						url: require("../../../assets/imgs/bsbs_03.jpg"),
						title: '美国LA MER/海蓝之谜 THE MOISTURIZING CREAM 经典传奇精华面霜 修护型60ml',
						price: '2099.00'
					},
					{
						id: '3699',
						url: require("../../../assets/imgs/bsbs_04.jpg"),
						title: 'COSME DECORTE/黛珂 紫苏水化妆水 150ml',
						price: '289.00'
					},
					{
						id: '3527',
						url: require("../../../assets/imgs/bsbs_05.jpg"),
						title: 'Estee Lauder /雅诗兰黛 紧实抗皱竹萃水',
						price: '309.00'
					},
					{
						id: '3476',
						url: require("../../../assets/imgs/bsbs_06.jpg"),
						title: 'LA MER/海蓝之谜 活肤舒缓喷雾 100ml',
						price: '519.00'
					},
					{
						id: '3973',
						url: require("../../../assets/imgs/bsbs_07.jpg"),
						title: 'SK-II 神仙水 护肤精华露 230ml',
						price: '899.00'
					},
					{
						id: '4529',
						url: require("../../../assets/imgs/bsbs_08.jpg"),
						title: '兰蔻（lancome） 【莎莎sasa】小黑瓶精华肌底液升级版100ml弹润修护淡细纹',
						price: '929.00'
					}
				],
				listData3: [{
						id: '3978',
						url: require("../../../assets/imgs/cztz_01.jpg"),
						title: 'Marc Jacobs Daisy 马克雅克布 梦幻雏菊女士淡香水 50ml',
						price: '359.00'
					},
					{
						id: '2123',
						url: require("../../../assets/imgs/cztz_02.jpg"),
						title: 'Dior迪奥口红魅惑粉漾润唇膏3.5g 变色唇膏口红 保湿滋润烈艳蓝金 001浅粉色-人气色',
						price: '169.00'
					},
					{
						id: '3445',
						url: require("../../../assets/imgs/cztz_03.jpg"),
						title: '伊丽莎白雅顿5th第五大道经典女士香水 30ML',
						price: '109.00'
					},
					{
						id: '2614',
						url: require("../../../assets/imgs/cztz_04.jpg"),
						title: '日本CANMAKE/井田 完美雕刻五色眼影 #12号色 温柔紫粉',
						price: '89.00'
					},
					{
						id: '3076',
						url: require("../../../assets/imgs/cztz_05.jpg"),
						title: 'bourjois妙巴黎 美肌哑光唇釉7.7ml #04',
						price: '79.00'
					},
					{
						id: '2742',
						url: require("../../../assets/imgs/cztz_06.jpg"),
						title: '韩国 IOPE/亦博 气垫粉底霜+替换装 N21 象牙色 轻薄保湿15g*2/盒(新版）',
						price: '169.00'
					},
					{
						id: '3016',
						url: require("../../../assets/imgs/cztz_07.jpg"),
						title: 'Armani/阿玛尼 小胖丁唇釉 #500 3.9ml',
						price: '259.00'
					},
					{
						id: '5767',
						url: require("../../../assets/imgs/cztz_08.jpg"),
						title: '日本CPB资生堂 钻石光感隔离妆前乳 清爽型 30g',
						price: '329.00'
					},
					{
						id: '5768',
						url: require("../../../assets/imgs/cztz_09.jpg"),
						title: 'Estee Lauder /雅诗兰黛 鲜活亮采红石榴(日霜50ML+晚霜50ML)套装',
						price: '719.00'
					},
					{
						id: '5766',
						url: require("../../../assets/imgs/cztz_10.jpg"),
						title: 'Estee Lauder /雅诗兰黛 小棕瓶ANR面部修护精华露50ml+眼霜15ml套装',
						price: '899.00'
					},
					{
						id: '3400',
						url: require("../../../assets/imgs/cztz_11.jpg"),
						title: 'LANCOME/兰蔻 水份缘三件套装 舒缓凝霜50ml+柔肤啫哩200ml+精华液30ml',
						price: '869.00'
					},
					{
						id: '4578',
						url: require("../../../assets/imgs/cztz_12.jpg"),
						title: '韩国 SU:M37°呼吸补水套装 惊喜水份水乳面霜三件套（保湿水170ml+乳液120ml+面霜20ml+赠品）',
						price: '549.00'
					},
					{
						id: '5769',
						url: require("../../../assets/imgs/cztz_13.jpg"),
						title: '雪花秀Sulwhasoo女士平衡保湿滋阴水乳护肤套装 水125ml+乳125ml送小样',
						price: '649.00'
					},
					{
						id: '4575',
						url: require("../../../assets/imgs/cztz_14.jpg"),
						title: 'Whoo/后 水妍补水三件套 14276',
						price: '699.00'
					}
				]
			}
		}
	}
</script>
<style lang="less" rel="stylesheet/less" scoped="scoped">
	.autoImg {
		width: 100%;
	}
	
	body {
		color: #464646;
		background: #ffd5a5;
	}
	
	.act2018032601 {
		font-family: fontFamily;
		min-height: 100vh;
		padding-bottom: .5rem;
		.head {
			background: #fff;
			.left-arrow {
				&:before {
					border-color: #464646;
				}
			}
			h1,
			.vux-header-more {
				color: #464646;
			}
		}
		.get-money,
		.limit {
			text-align: center;
			background: #ffd5a5;
			padding: .1rem 0;
			position: relative;
			img {
				display: block;
				margin: 0 auto;
				width: 7rem;
			}
			.absolute-box {
				position: absolute;
				top: 0;
				right: 1%;
				width: 2.6rem;
				height: 2.35rem;
				align-items: center;
				justify-content: center;
				span {
					font-size: .3rem;
					color: #ec5623;
					font-weight: 500;
				}
				button {
					font-size: .27rem;
					color: #fff;
					background: #fd6c3b;
					margin-top: .1rem;
					border: none;
					width: 1.78rem;
					height: .64rem;
					border-radius: .5rem;
				}
			}
		}
		.list-item {
			background: #ffd5a5;
			padding-top: .5rem;
			clear: both;
			.title-20180327 {
				display: block;
				width: 4.6rem;
				margin: 0 auto .5rem;
				background: #ffd5a5;
			}
		}
		.click-bg {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 111111;
		}
		img.success-get {
			width: 4.3rem;
			height: 5.2rem;
		}
	}
</style>